<!DOCTYPE html>
<html>
  <head>
    <title>Vysor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href='font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src='common/jquery-2.1.1.min.js'></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src='common/buy.js'></script>

    <script src="require.js" type="text/javascript"></script>
    <script src='util.js'></script>
    <script src='modal.js'></script>
    <script src='purchase.js'></script>
    <script src='uglify-purchase.js'></script>
    <style>
    .blue-icon {
      color: #4A98E5;
    }
    .green-icon {
      color: #34C109;
    }
    .table-column-striped tbody tr:nth-child(2n + 1) {
        background-color: transparent;
    }
    .table-column-striped tbody td:nth-child(3) {
        background-color: rgba(144, 144, 144, 0.075);
    }
    .table-column-striped tbody th:nth-child(3) {
        background-color: rgba(144, 144, 144, 0.075);
    }
    .table-column-striped tbody td:nth-child(4) {
        background-color: rgba(144, 144, 144, 0.075);
    }
    .table-column-striped tbody th:nth-child(4) {
        background-color: rgba(144, 144, 144, 0.075);
    }
    .table-column-striped tbody td:nth-child(2),
    .table-column-striped tbody td:nth-child(3),
    .table-column-striped tbody td:nth-child(4),
    .table-column-striped thead tr th:nth-child(2),
    .table-column-striped thead tr th:nth-child(3),
    .table-column-striped thead tr th:nth-child(4) {
      text-align: center;
    }
    body {
      padding: 16px;
    }
    .time-highlight {
      color: red;
    }
    td {
      font-size: 14px;
    }
    html, body {
        overflow-y: visible;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .grow { transition: all .1s ease-in-out; }
    .grow:hover { transform: scale(1.1); }

    .plans-outer {
      width: 100%;
      margin: 0px auto;
    }

    .plans-inner {
      float: left;
      width: 25%;
    }

    .plan-upgrade, .plan {
      text-align: center;
      margin-left: 10px;
      margin-right: 10px;
      border-radius: 6px;
      color: white;
    }

    .plan {
      padding-top: 10px;
      min-height: 200px;
    }

    .plan-upgrade {
      min-height: 30px;
      padding-top: 4px;
    }

    .plan-price {
      position: relative;
      display: block;
      height: 6rem;
      font-size: 5.5rem;
      line-height: 6.5rem;
      font-weight: 450;
      margin-bottom: .5rem;
    }
    .plan-price .currency {
      position: relative;
      top: -1.75rem;
      font-weight: 400;
      font-size: 3rem;
      letter-spacing: 0;
    }
    .plan-header {
      margin-bottom: .625rem;
      font-weight: 900;
      text-shadow: none;
      color: #fff;
      position: relative;
      z-index: 2;
    }
    .plan-price-details {
      display: block;
      margin-bottom: 1.4rem;
      font-size: 1.3rem;
      line-height: 1.3rem;
      opacity: .8;
      -moz-opacity: .8;
      -khtml-opacity: .8;
      text-shadow: none;
    }
    .plan-monthly {
      background-color: rgba(138,116,185,.95);
    }
    .plan-annual {
      background-color: rgba(76,185,146,.95);
    }
    .plan-lifetime {
      background-color: rgba(52,153,224,.95);
    }
    .plan-enterprise {
      background-color: #e99b4f;
    }

    .payment-img {
      width: 228px;
      min-width: 228px
      max-width: 228px;
      margin: 10px;
    }
    </style>
  </head>
  <body>
    <div class="modal fade"  id="notificationModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id='modal-title'></h4>
          </div>
          <div class="modal-body">
            <p id='modal-body'></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id='modal-cancel'></button>
            <button type="button" class="btn btn-primary" id='modal-ok'></button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade"  id="paymentModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Checkout</h4>
          </div>
          <div class="modal-body">
            <div>License Account: <span id='purchase-email'></span>.<br/><a href="https://support.vysor.io/support/licensing/multiple/" target="_blank">Wrong account? Read this.</a><br/><br/></div>
            <center>
              <p><b>Preferred Checkout</b></p>
              <div>
                <a id='pay-card' href='#'><img src='payment/card.png' class='payment-img' /></a>
              </div>

              <br/>
              <p><b>Alternate Checkout</b></p>
              <div>
                <a id='pay-google' href='#'><img src='payment/google.png' class='payment-img' /></a>
              </div>

              <div>
                <a id='pay-paypal' href='#'><img src='payment/paypal.png' class='payment-img' /></a>
              </div>
            </center>
            <br/>
            <br/>
            <p>Preferred Checkout is powered by <a href='https://www.stripe.com' target='_blank'>Stripe</a>: secure payments, easy to manage subscription, and hassle free. Any order issues can be quickly resolved. This option is highly recommended.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


        <section class="wrapper">
          <div class='inner'>
          <div>Already purchased?</div>
          <a id='retrieve' class='btn btn-primary'>Retrieve License</a>
        </div>
        </section>


    <header class="major">
      <center>
        <h2>Upgrade Vysor</h2>
        <h4 id='used'></h4>
      </center>
    </header>

    <section id="plans" class="wrapper">
      <div class="plans-outer">
        <div class='plans-inner'>
          <div class='plan plan-monthly grow cursor-pointer'>
            <h3 class='plan-header'>Monthly</h3>
            <span class='plan-price'>
              <span class='currency'>$</span>2.50
            </span>
          </div>
        </div>
        <div class='plans-inner'>
          <div class='plan plan-annual grow cursor-pointer'>
            <h3 class='plan-header'>Annual</h3>
            <span class='plan-price'>
              <span class='currency'>$</span>10
              <!-- <span class="plan-price-details">7 day free trial<br>with credit card<br/>purchase</span> -->
            </span>
          </div>
        </div>
        <div class='plans-inner'>
          <div class='plan plan-lifetime grow cursor-pointer'>
            <h3 class='plan-header'>Lifetime</h3>
            <span class='plan-price'>
              <span class='currency'>$</span>40
            </span>
          </div>
        </div>
        <div class='plans-inner'>
          <div class='plan plan-enterprise grow cursor-pointer'>
            <h3 class='plan-header'>Enterprise</h3>
            <span class='plan-price'>
              <span class='currency'>$</span>2
            </span>
            <span class="plan-price-details">per active user, per month<br>billed monthly</span>
          </div>
        </div>
      </div>
      <div class="plans-outer">
        <div class='plans-inner'>
          <div class='plan-upgrade plan-monthly cursor-pointer'>Upgrade Now</div>
        </div>
        <div class='plans-inner'>
          <div class='plan-upgrade plan-annual cursor-pointer'>Upgrade Now</div>
        </div>
        <div class='plans-inner'>
          <div class='plan-upgrade plan-lifetime cursor-pointer'>Upgrade Now</div>
        </div>
        <div class='plans-inner'>
          <div class='plan-upgrade plan-enterprise cursor-pointer'>Upgrade Now</div>
        </div>
      </div>
    </section>



    <section id="pricing" class="wrapper">
      <div class="inner">
        <section>
          <div class="table-wrapper">
            <table class="table table-column-striped">
              <thead>
                <tr>
                  <th></th>
                  <th width='20%'>Vysor Free</th>
                  <th width='20%'>Vysor Pro</th>
                  <th width='20%'>Vysor Enterprise</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Mirror and Control Android</td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                </tr>
                <tr>
                  <td>Screenshots</td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                </tr>
                <tr>
                  <td>High Quality Mirroring</td>
                  <td></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                </tr>
                <tr>
                  <td>Fullscreen Mode</td>
                  <td></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                </tr>
                <tr>
                  <td>Go Wireless</td>
                  <td></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                </tr>
                <tr>
                  <td>Vysor Share</td>
                  <td></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                </tr>
                <tr>
                  <td>Drag and Drop Files</td>
                  <td></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                </tr>
                <tr>
                  <td>Access to <b>all</b> future features</td>
                  <td></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                </tr>
                <tr>
                  <td>Vysor Share access management via web</td>
                  <td></td>
                  <td></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                </tr>
                <tr>
                  <td>Flexible organizational licensing</td>
                  <td></td>
                  <td></td>
                  <td><span class="blue-icon fa fa-check"></span></td>
                </tr>
              </tbody>
              <!-- <tfoot>
                <tr>
                  <td colspan="3" style='text-align: right;'>$1.99/mo or $9.99/yr</td>
                </tr>
              </tfoot> -->
            </table>
          </div>
        </section>
      </div>
    </section>

    <section class='wrapper' style='display: none;'>
      <div class='inner'>
        <section id='purchase-options'>
          <div class='table-wrapper'>
            <table class="table table-column-striped">
              <thead>
                <tr>
                  <th>Vysor Pro Purchase Options</th>
                  <th width='30%'>Price</th>
                  <th width='30%'>Payment Method</th>
                </tr>
              </thead>
              <tbody id='prices'>
              </tbody>
            </table>
          </div>
        </section>

        <br/>
        <div id='purchase-options-loading'>
          <center><h4>One moment...</h4><center>
        </div>
      </div>
    </section>
  </body>
</html>
